<template>
  <div>
    <Table :columns="columns1" :data="dataList">
        <template slot-scope="{ row, index }" slot="action">
            <Button @click="emit(row,index)">编辑</Button>
            <Button>删除</Button>
         </template>
    </Table>
    <!-- 对话框 -->
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <Input v-model="updateData.name"/>
    </Modal>
  </div>
</template>

<script>
 export default {
   data () {
     return {
       modal1: false ,
       columns1: [
         {
             title: 'Name',
             key: 'name'
         },
         {
             title:'电话',
             key:'phone'
         },
         {
             title: '距离',
             key: 'distance'
         },
         {
             title: '操作',
             slot: 'action',
             width: 150,
             align: 'center'
         }
       ],
       dataList: [],
       updateData:JSON.parse(localStorage.getItem("new"))||[],
       oldData:JSON.parse(localStorage.getItem("old"))||[]
     }
   },
   mounted(){
     this.$axios.get('shopList(1).json').then(res=>{
        //  console.log(res.data)
         this.dataList = res.data
     })
   },
   methods:{
       emit(row,w){
           localStorage.setItem("old",JSON.stringify(row))
           this.modal1 = true;
           this.updateData = row;
        //    localStorage.setItem("new",JSON.stringify(this.updateData))
       },
       ok () {
           this.$Message.info('修改成功');
        //    localStorage.setItem("new",JSON.stringify(this.updateData))
       },
       cancel () {
           this.$Message.info('取消修改');
           console.log(this.updateData.name)
           this.updateData = this.oldData
           console.log("========",this.updateData)
           localStorage.setItem("new",JSON.stringify(this.updateData))
       }
   }
}
</script>

<style>

</style>